<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../assets/css/base.css">
</head>
<body>
    <div id="app">
        <div>
            <pre v-pre class="note">
            vue的实例方法和实例属性：在vue完成应用创建后，由mount挂载产生的实例对象能够直接访问的属性和方法
                + $watch 构建一个对Vue实例中数据仓库中变量（data，computed）的监控方法
                // ===> 下述的三个实例属性，在实际项目中没有应用价值 ===> 属性存在的目的是为深入学习vue只是提供数据获取展示的
                + vm.$el：描述当前vue实例对应的容器中的第一个元素(文本)；如果容器中只有一个标签元素则返回这个标签
                + vm.$data：描述当前Vue实例定义时data描述所有被劫持的数据变量组成的对象。
                + vm.$options：构建当前 Vue 实例的初始化选项。
            </pre>
            <input type="button" value="printEl" @click="printEl()">
            <input type="button" value="printData" @click="printData()">
            <input type="button" value="printOptions" @click="printOptions()">

        </div>
    </div>
    <script type="module">
        import { createApp } from "../assets/vue3/vue.esm-browser.js";
        let app = createApp({
            data() {
                return {
                    info:"info",
                    num:1234,
                    arr:[12,3,4,5],
                    obj:{
                        a:1
                    }
                }
            },
            methods: {
                printEl() {
                    console.log( "$el:",this.$el )
                },
                printData(){
                    console.log( "this:",this )
                    console.log( "$data:",this.$data )
                },
                printOptions(){
                    console.log( "$options:",this.$options )
                }
            },
        })
        
        let vm = app.mount("#app")
    </script>
</body>
</html>